<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
   <body style="background: #ccc">
   <canvas id="canvas" width="500" height="500" style="background: #fff;"></canvas>
   <script src="../js/utils.js"></script>
   <script src="../js/ball.js"></script>
   <script src="../js/Line.js"></script>
   <script>
       window.onload = function(){
           var canvas = document.getElementById('canvas'),
               context = canvas.getContext('2d'),
               ball = new Ball(),
               line = new Line(0,0,300,0),
               bounce = -0.6,
               gravity = 0.2,
               angleN = 10;
           
           ball.x = 100;
           ball.y = 100;
           
           line.x = 50;
           line.y = 300;
           line.rotation = angleN * Math.PI/180;
           
           var cos = Math.cos(line.rotation),
               sin = Math.sin(line.rotation);
           
           (function drawFrame(){
               window.requestAnimationFrame(drawFrame, canvas);
               context.clearRect(0, 0, canvas.width, canvas.height);
               
               ball.vy += gravity;
               ball.x += ball.vx;
               ball.y += ball.vy;
               
               var x1 = ball.x - line.x,
                   y1 = ball.y - line.y,
                   
                   y2 = y1*cos - x1*sin;
                   
                  if(y2 > -ball.radius){
                      //旋转坐标
                      var x2 = x1*cos + y1*sin;
                      
                      //旋转速度
                      vx1 = ball.vx*cos + ball.vy*sin;
                      vy1 = ball.vy*cos - ball.vx*sin;
                      
                      y2 = -ball.radius;
                      vy1 *= bounce;
                      
                      //rotate everything back
                      x1 = x2*cos - y2*sin;
                      y1 = y2*cos + x2*sin;
                      ball.vx = vx1*cos - vy1*sin;
                      ball.vy = vy1*cos + vx1*sin;
                      ball.x = line.x + x1;
                      ball.y = line.y + y1;
                      
                  }
               
               ball.draw(context);
               line.draw(context);
           }());
       }
       
   </script>
    
</body>
</html>